<div class="intro">
<p>This example shows how to use the core of YUI.</p>
</div>

<div class="example">
    {{>yui-core}}
</div>

<h3>Setting up the YUI Instance</h3>
<p>Here we will create our `YUI` instance, loading `node` so we can work with DOM elements in the example.</p>

```
YUI().use('node', ...
```

<h3>Using the callback</h3>
<p>The <code>use</code> method will dynamically fetch anything required for `Node` if it isn't already on the page.
If dynamic loading is required, the last parameter supplied to <code>use</code> should be a function to execute when
the load is complete.  This function will be executed whether or not dynamic loading is required, so it
is the preferred pattern for using <code>YUI</code>.</p>

```
YUI().use('node', function(Y) ...
```

<p>
The function is supplied a reference to the <code>YUI</code> instance, so we can wrap all of our implementation code inside of
the <code>use</code> statement without saving an external reference to the instance somewhere else.
</p>
<p>
Now that we know all of the modules are loaded, we can use `Node`
to update DOM nodes in many ways.
Here's a simplified version of the fruit example above.
</p>
<style>
.example-simple{
    height: 30px;
}
.example-simple span{
    padding: 0.3em;
    margin: 0.3em;
}
</style>

<div class="example example-simple">
{{>yui-core-simple}}
</div>


```
{{>yui-core-simple}}
```
<p>

</p>

<h3>Full Source</h3>
<p>
Here's the full source of the fruit example.
</p>

```
{{>yui-core}}
```
